<!--
    使用  v-model     指令为input绑定参数
    语法:         v-model =   "arg"
    同时使用    v-model     指令为input绑定value
    语法:         v-bind:value "arg"
-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单控件绑定</title>
    <script src="js/vue.js"></script>
    <style>
        div{
            border: 1px dotted #e6e6e6;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>

<div id="ex1">
    <input v-model="message" type="text" placeholder="edit me"/>
    <p>Message is : {{ message }}</p>
</div>

<div id="ex2">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <br/>
    <span>Multiline message is:</span>
    <p style="white-space: pre">{{ message }}</p>
</div>

<div id="ex3">
    <input type="checkbox" id="checkbox" v-model="message"/>
    <label for="checkbox"> {{ message }} </label>
</div>

<div id="ex4">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>

<div id="ex5">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>

<div id="ex6">
    <select v-model="select">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ select }}</span>
</div>

<div id="ex7">
    <select v-model="choose" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ choose }}</span>
</div>

<div id="ex8">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

<div id="ex9">
    <input type="checkbox" v-model="toggle" v-bind:true-value="select" v-bind:false-value="notSelect">
</div>

<div id="ex10">
    <input type="radio" v-model="pick" v-bind:value="a">
    <input type="radio" v-model="pick" v-bind:value="b">
</div>

<div id="ex11">
    <select v-model="selected">
        <!-- 内联对象字面量 -->
        <option v-bind:value="{ number: 'A' }">A</option>
        <option v-bind:value="{ number: 'B' }">B</option>
    </select>
</div>
<script>
    var ex1 =   new Vue({
        el:"#ex1",
        data:{
            message:''
        }
    });

    var ex2 =   new Vue({
        el:"#ex2",
        data:{
            message:''
        }
    });

    var ex3 =   new Vue({
        el:"#ex3",
        data:{
            message:true
        }
    });

    var ex4 =   new Vue({
        el:"#ex4",
        data:{
            checkedNames: []
        }
    });

    var ex5 =   new Vue({
        el:"#ex5",
        data:{
            picked:'One'
        }
    });

    var ex6 =   new Vue({
        el:"#ex6",
        data:{
            select:"A"
        }
    });

    var ex7 =   new Vue({
        el:"#ex7",
        data:{
            choose:[]
        }
    });

    var ex8 =   new Vue({
        el:"#ex8",
        data:{
            selected:'A',
            options:[
                { text:'One',value:'A' },
                { text:'Two',value:'B' },
                { text:'Three',value:'C'}
            ]
        }
    });

    var ex9 =   new Vue({
        el:"#ex9",
        data:{
            toggle:'init',
            select:'yes',
            notSelect:'no'
        }
    });

    var ex10    =   new Vue({
        el:"#ex10",
        data:{
            pick:'true',
            a:'ayes',
            b:'byes'
        }
    });

    var ex11    =   new Vue({
        el:"#ex11",
        data:{
            selected:'init'
        }
    });
</script>
</body>
</html>
